<template>
	<el-card shadow="hover" header="欢迎">
		<div class="welcome">
			<div class="flex justify-center items-center">
				<img class="align-bottom w-30 h-30 mb-5" src="/img/logo.png">
				
			</div>
			<div>
				<h2 class="flex justify-center text-4xl font-normal">欢迎体验 Mate Admin</h2>
			</div>
			<div class="tips">
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-menu/></el-icon></div>
					<div class="tips-item-message">这里是项目控制台，你可以点击右上方的“自定义”按钮来添加移除或者移动部件。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-promotion/></el-icon></div>
					<div class="tips-item-message">在提高前端算力、减少带宽请求和代码执行力上多次优化，并且持续着。</div>
				</div>
				<div class="tips-item">
					<div class="tips-item-icon"><el-icon><el-icon-milk-tea/></el-icon></div>
					<div class="tips-item-message">项目目的：让前端工作更快乐</div>
				</div>
			</div>
			<div class="actions">
				<el-button type="primary" icon="el-icon-check" size="large" @click="godoc">文档</el-button>
			</div>
		</div>
	</el-card>
</template>

<script lang="ts">
export default {
	title: "欢迎",
	icon: "el-icon-present",
	description: "项目特色以及文档链接",
	setup() {
		const godoc = () => {
			window.open("https://doc.mate.vip")
		}
		return {
			godoc
		}
	}
}
</script>

<style scoped>
	.tips {margin-top: 20px;padding:0 40px;}
	.tips-item {display: flex;align-items: center;justify-content: center;padding:7.5px 0;}
	.tips-item-icon {width: 40px;height:40px;display: flex;align-items: center;justify-content: center;border-radius: 50%;font-size: 18px;margin-right: 20px;color: var(--el-color-primary);background: rgba(180,180,180,0.1);}
	.tips-item-message {flex: 1;font-size: 14px;}
	.actions {text-align: center;margin: 40px 0 20px 0;}
</style>
